/**
 *  @互联家
 *  @互联家 设备信息多选页面
 */
import React, { Component } from 'react';
import { StyleSheet, ScrollView, View, Text } from 'react-native';

/**
 *  @style 主要样式导入
 */
import deviceStyle from "../styles/device";

export default class DeviceScreen extends Component {

  static navigationOptions = {
    headerTitle: '设备信息',
    headerRight: <View />,
  };
  
  constructor(props) {
    super(props);
    this.state = {
      classList: [{
        name: '家电类', id: '1', childrens: [{
          id: '11',
          name: '电视',
          status: false,
        }, {
          id: '12',
          name: '空调',
          status: false,
        }, {
          id: '13',
          name: '冰箱',
          status: false,
        }, {
          id: '14',
          name: '吹风机',
          status: false,
        }, {
          id: '15',
          name: '电梯',
          status: false,
        }, {
          id: '16',
          name: '电熨斗',
          status: false,
        }, {
          id: '17',
          name: '加湿器',
          status: false,
        }, {
          id: '18',
          name: '卡拉Ok',
          status: false,
        }, {
          id: '19',
          name: '空气净化器',
          status: false,
        }, {
          id: '110',
          name: '麻将机',
          status: false,
        }, {
          id: '111',
          name: '门禁系统',
          status: false,
        }, {
          id: '112',
          name: '暖气',
          status: false,
        }, {
          id: '113',
          name: '全天热水',
          status: false,
        }, {
          id: '114',
          name: '投影设备',
          status: false,
        }, {
          id: '115',
          name: '洗衣机',
          status: false,
        }, {
          id: '116',
          name: '游戏机',
          status: false,
        }, {
          id: '117',
          name: '智能门锁',
          status: false,
        }, {
          id: '118',
          name: '桌面足球',
          status: false,
        }]
      }, {
        name: '生活类', id: '2', childrens: [{
          id: '21',
          name: 'WIFI',
          status: false,
        }, {
          id: '22',
          name: '打扫工具',
          status: false,
        }, {
          id: '23',
          name: '毛巾',
          status: false,
        }, {
          id: '24',
          name: '灭火器',
          status: false,
        }, {
          id: '25',
          name: '晾衣架',
          status: false,
        }, {
          id: '26',
          name: '拖鞋',
          status: false,
        }, {
          id: '27',
          name: '卫生纸',
          status: false,
        }, {
          id: '28',
          name: '洗涤用具',
          status: false,
        }, {
          id: '29',
          name: '洗发水',
          status: false,
        }, {
          id: '210',
          name: '洗衣粉/液',
          status: false,
        }, {
          id: '211',
          name: '香皂/洗手液',
          status: false,
        }, {
          id: '212',
          name: '牙具',
          status: false,
        }, {
          id: '213',
          name: '浴缸',
          status: false,
        }, {
          id: '214',
          name: '浴巾',
          status: false,
        }, {
          id: '215',
          name: '宽带',
          status: false,
        }]
      }, {
        name: '厨房用具', id: '3', childrens: [{
          id: '31',
          name: '提供早餐',
          status: false,
        }, {
          id: '32',
          name: '提供午餐',
          status: false,
        }, {
          id: '33',
          name: '免费洗衣',
          status: false,
        }, {
          id: '34',
          name: '免费停车',
          status: false,
        }, {
          id: '35',
          name: '保安',
          status: false,
        }, {
          id: '36',
          name: '行李寄存',
          status: false,
        }]
      }],
      option: []
    };
  };

  addClass = (index, data, i) => {
    let classList = this.state.classList;
    let option = this.state.option;
    if (option.indexOf(data)) {
      classList[index].childrens[i].status = true;
      option.push(data);
    } else {
      classList[index].childrens[i].status = false;
      option.remove(data);
    }
    this.setState({
      classList,
      option
    });
  };

  render() {
    return (
      <ScrollView style={{ flex: 1, backgroundColor: '#ffffff' }}>

        <View style={styles.container}>

          {this.state.classList.map((value, index) => {
            return (
              <View style={styles.classItem} key={index}>
                <View>
                  <Text style={styles.itemTitle}>{value.name}</Text>
                </View>
                <View style={styles.classBox}>
                  {value.childrens.map((e, i) => {
                    return (<Text style={[styles.boxItem, e.status ? styles.boxItemSel : '']} onPress={() => { this.addClass(index, e, i) }} key={i}>{e.name}</Text>);
                  })}
                </View>
              </View>
            );
          })}

        </View>

      </ScrollView>
    );
  };

};

const styles = StyleSheet.create(deviceStyle);